<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Setting - MaoXian</title>
    <link rel="stylesheet" type="text/css" href="_base.css" />
    <link rel="stylesheet" type="text/css" href="setting.css" />
  </head>
  <body>

    <div class="main">
      <div class="sidebar">
        <a class="menu" href="#setting-save-format" i18n="setting.title.save-format"></a>
        <a class="menu" href="#setting-clipping-handler" i18n="setting.title.clipping-handler"></a>
        <a class="menu" href="#setting-clipping-content" i18n="setting.title.clipping-content"></a>
        <a class="menu" href="#setting-path" i18n="setting.title.path"></a>
        <a class="menu" href="#setting-file-scheme-access" i18n="setting.title.file-url"></a>
        <a class="menu" href="#setting-offline-page" i18n="setting.title.offline-page"></a>
        <a class="menu" href="#setting-refresh-history" i18n="setting.title.refresh-history"></a>
        <a class="menu" href="#setting-hotkey" i18n="setting.title.hotkey"></a>
        <a class="menu" href="#setting-other" i18n="setting.title.other"></a>
      </div>
      <div class="content">
      </div>
    </div>

    <template id="setting-page-tpl">
      <section id="setting-save-format">
        <h3 i18n="setting.title.save-format"></h3>
        <div class="options" id="setting-format">
          <a data-value="html">HTML</a>
          <a data-value="md">Markdown</a>
        </div>
      </section>
      <section id="setting-clipping-handler">
        <h3 i18n="setting.title.clipping-handler"></h3>
        <div class="notice-info">
          <p>
            <label i18n="setting.notice.clipping-handler.intro"></label>
             <br />
            <a href="${nativeAppUrl}" target="_blank" i18n="setting.notice.clipping-handler.link-label"></a>
            <br />
          </p>
        </div>
        <div class="notice-warning">
          <p i18n="setting.notice.clipping-handler.warning"></p>
        </div>
        <div class="options" id="clipping-handler">
          <a data-value="browser" i18n="setting.clipping-handler-option.browser"></a>
          <a data-value="native-app" i18n="setting.clipping-handler-option.native-app"></a>
        </div>
      </section>
      <section id="setting-clipping-content">
        <h3 i18n="setting.title.clipping-content"></h3>
        <p>
          <input type="checkbox" id="save-clipping-information" />
          <label for="save-clipping-information" i18n="setting.clip-information-input.label"></label>
          <br />
          <input type="checkbox" id="save-web-font" />
          <label for="save-web-font" i18n="setting.save-web-font-input.label"></label>
          <br />
          <input type="checkbox" id="save-css-image" />
          <label for="save-css-image" i18n="setting.save-css-image-input.label"></label>
          <br />
          <input type="checkbox" id="save-domain-as-tag" />
          <label for="save-domain-as-tag" i18n="setting.save-domain-tag-input.label"></label>
        </p>
      </section>
      <section id="setting-path">
        <h3 i18n="setting.title.path"></h3>
        <p>
          <input type="checkbox" id="save-title-as-fold-name" />
          <label for="save-title-as-fold-name" i18n="setting.save-title-as-fold-name-input.label"></label>
          <br />

          <input type="checkbox" id="save-title-as-filename" />
          <label for="save-title-as-filename" i18n="setting.save-title-as-filename-input.label"></label>
          <br />

          <div class="notice-info" i18n="setting.notice.default-clipping-folder-format"></div>
          <input type="text" id="default-clipping-folder-format" i18n-attr="placeholder:setting.placeholder.notblank"/>
          <br />

          <div class="notice-info" i18n="setting.notice.title-clipping-folder-format"></div>
          <input type="text" id="title-clipping-folder-format" i18n-attr="placeholder:setting.placeholder.notblank" />
          <br />

          <div class="notice-info" i18n="setting.notice.asset-path"></div>
          <input type="text" id="asset-path" i18n-attr="placeholder:setting.placeholder.notblank"/>
          <br />
          <div class="notice-info" i18n="setting.notice.default-category"></div>
          <input type="text" id="default-category" i18n-attr="placeholder:setting.placeholder.notblank"/>
        </p>
      </section>
      <section id="setting-file-scheme-access">
        <h3 i18n="setting.title.file-url"></h3>
        <p>
          <div class="notice-info">
            <label i18n="setting.notice.file-url.intro"></label>
            <br />
            <a href="${settingFileUrlLink}" target="_blank" i18n="setting.notice.file-url.link-label"></a>
            <br />
            <label i18n="setting.notice.file-url.help-msg"></label>
            <br />
            <label i18n="setting.notice.file-url.ext-id"></label>
            <label>=&gt; ${host}</label>
          </div>
          <div class="notice-warning">
            <strong i18n="setting.warning"></strong>:<br />
            <label i18n="setting.notice.file-url-warning"></label>
          </div>
          <input type="checkbox" id="file-scheme-access-input"/>
          <label for="file-scheme-access-input" i18n="setting.file-url-input.label"></label>
        </p>
      </section>
      <section id="setting-offline-page">
        <h3 i18n="setting.title.offline-page"></h3>
        <div class="notice-info">
          <label  i18n="setting.notice.offline-page"></label>
          <br />
          <a href="${offlinePageIntro}" target="_blank" i18n="setting.notice.offline-page.link-label"></a>
        </div>
        <div class="notice-info" i18n="setting.notice.clipping-js-path"></div>
        <input type="text" id="clipping-js-path" i18n-attr="placeholder:setting.placeholder.notblank"/>
        <br />
        <div class="notice-info" i18n="setting.notice.autogenerate-clipping-js"></div>
        <p>
          <input type="checkbox" id="autogenerate-clipping-js" />
          <label for="autogenerate-clipping-js" i18n="setting.autogenerate-clipping-js-input.label"></label><br /><br />
          <label i18n="setting.last-generate-time.label"></label>:
          <label id="last-generate-clipping-js-time">${lastGenerateClippingJsTime}</label>&nbsp;
          <button id="generate-clipping-js-now" i18n="setting.button.generate-now"></button>
        </p>
      </section>
      <section id="setting-refresh-history">
        <h3 i18n="setting.title.refresh-history"></h3>
        <div class="notice-info" i18n="setting.notice.refresh-history"></div>
        <div class="notice-warning" i18n="setting.notice.refresh-history-warning"></div>
        <p>
          <input type="checkbox" id="auto-refresh-history" />
          <label for="auto-refresh-history" i18n="setting.auto-refresh-history-input.label"></label><br /><br />
          <label i18n="setting.last-refresh-time.label"></label>:
          <label id="last-refresh-history-time">${lastRefreshHistoryTime}</label>&nbsp;
          <button id="refresh-history-now" i18n="setting.button.refresh-now"></button>
        </p>
      </section>
      <section id="setting-hotkey">
        <h3 i18n="setting.title.hotkey"></h3>
        <p>
          <input type="checkbox" id="enable-switch-hotkey" />
          <label for="enable-switch-hotkey" i18n="setting.enable-switch-hotkey-input.label"></label>
        </p>
      </section>
      <section id="setting-other">
        <h3 i18n="setting.title.other"></h3>
        <p>
          <input type="checkbox" id="enable-mouse-mode" />
          <label for="enable-mouse-mode" i18n="setting.enable-mouse-mode-input.label"></label>
        </p>
      </section>
    </template>

    <script type="text/javascript" src="../vendor/js/browser-polyfill.js"></script>
    <script type="text/javascript" src="../vendor/js/i18n.js"></script>
    <script type="text/javascript" src="../js/env.js"></script>
    <script type="text/javascript" src="../js/tool.js"></script>
    <script type="text/javascript" src="../_locales/en.js"></script>
    <script type="text/javascript" src="../_locales/zh-CN.js"></script>
    <script type="text/javascript" src="../js/lib/log.js"></script>
    <script type="text/javascript" src="../js/lib/ext-api.js"></script>
    <script type="text/javascript" src="../js/lib/translation.js"></script>
    <script type="text/javascript" src="../js/lib/notify.js"></script>
    <script type="text/javascript" src="../js/lib/mx-wc-storage.js"></script>
    <script type="text/javascript" src="../js/lib/mx-wc-config.js"></script>
    <script type="text/javascript" src="../js/lib/mx-wc-link.js"></script>
    <script type="text/javascript" src="setting.js"></script>
  </body>
</html>
